<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>名片统计</title>
    <link rel="shortcut icon" href="favicon.ico"> <link href="<%=path%>/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/footable/footable.core.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/dataTables/css/jquery.dataTables.min.css"/>
    <link href="<%=path%>/hplus/css/animate.min.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/chosen/chosen.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/cropper/cropper.min.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/switchery/switchery.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/jasny/jasny-bootstrap.min.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/nouslider/jquery.nouislider.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/ionRangeSlider/ion.rangeSlider.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/ionRangeSlider/ion.rangeSlider.skinFlat.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/clockpicker/clockpicker.css" rel="stylesheet">
    <style> 
        .col-sm-1{
            font-weight: normal;
        }  
        table.dataTable tbody th, table.dataTable tbody td{
        padding:10;
        }  
        
          
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="tabs-container">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">微信</a>
                </li>
                <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">其他</a>
                </li>
            </ul>
            <div class="tab-content">
                <div id="tab-1" class="tab-pane active">
                    <div class="panel-body">
                         <form class="form-horizontal">
			                <div class="col-sm-3">
			                    <div class="input-group">
			                        <input id="keyWord_wechat" type="text" placeholder="输入员工名称或ID号" class="input form-control">
			                        <span class="input-group-btn">
			                            <button onclick="javascript:search_wechat();" type="button" class="btn btn btn-primary"> <i class="fa fa-search"></i> 搜索</button>
			                        </span>
			                    </div>
			                </div>
			            
			                <div class="col-sm-5"></div>      
			               
			               <!--  <div class="col-sm-4" >
			                    <button onclick="javascript:exportDatas();" class="btn btn-primary pull-right" type="button">导出表单</button>
			                </div> -->
			             </form> 
			             <div class="col-sm-12" style="margin-top:20px;">
			                <div class="ibox float-e-margins">
			                    <div class="table-responsive">
			                        <table class="display  table-striped table-bordered table-hover" id="wechatTable" style="width: 100%;">
			                            <thead>
			                                <tr>
			                                    <th>序号</th>
			                                    <th>员工ID</th>
			                                    <th class="sendNum">员工</th>
			                                    <th class="browseNum">打开量</th>
			                                    <th class="transmitNum">转发量</th>
			                                    <th class="activityClickNum">点击活动</th>
			                                    <th class="converNum">活动转化</th>
			                                </tr>
			                            </thead>
			                            <tbody>
			                            </tbody>
			                        </table>
			                    </div>                 
			                </div>
			            </div>
                    </div>
                </div>
                <div id="tab-2" class="tab-pane">
                   <div class="panel-body">
                         <form class="form-horizontal">
			                <div class="col-sm-3">
			                    <div class="input-group">
			                        <input id="keyWord_other" type="text" placeholder="输入员工名称或ID号" class="input form-control">
			                        <span class="input-group-btn">
			                            <button onclick="javascript:search_other();" type="button" class="btn btn btn-primary"> <i class="fa fa-search"></i> 搜索</button>
			                        </span>
			                    </div>
			                </div>
			            
			               <div class="col-sm-5"></div>    
			               <!--  <div class="col-sm-4">
			                    <button onclick="javascript:exportDatas();" class="btn btn-primary pull-right" type="button">导出表单</button>
			                </div> -->
			             </form> 
			             <div class="col-sm-12" style="margin-top:20px;">
			                <div class="ibox float-e-margins">
			                    <div class="table-responsive">
			                        <table class="display  table-striped table-bordered table-hover" id="otherTable" style="width: 100%;">
			                            <thead>
			                                <tr>
			                                    <th>序号</th>
			                                    <th>员工ID</th>
			                                    <th class="sendNum">员工</th>
			                                    <th class="browseNum">打开量</th>
			                                    <th class="disBrowseNum">独立打开量</th>
			                                    <th class="transmitNum">转发量</th>
			                                    <th class="activityClickNum">点击活动</th>
			                                    <th class="converNum">活动转化</th>
			                                </tr>
			                            </thead>
			                            <tbody>
			                               
			                            </tbody>
			                        </table>
			                    </div>                 
			                </div>
			            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="<%=path%>/hplus/js/jquery.min.js?v=2.1.4"></script>
    <script src="<%=path%>/hplus/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="<%=path%>/hplus/js/content.min.js?v=1.0.0"></script>
    <script src="<%=path%>/hplus/js/plugins/chosen/chosen.jquery.js"></script>
    <script src="<%=path%>/hplus/js/plugins/jsKnob/jquery.knob.js"></script>
    <script src="<%=path%>/hplus/js/plugins/jasny/jasny-bootstrap.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/datapicker/bootstrap-datepicker.js"></script>
    <script src="<%=path%>/hplus/js/plugins/prettyfile/bootstrap-prettyfile.js"></script>
    <script src="<%=path%>/hplus/js/plugins/switchery/switchery.js"></script>
    <script src="<%=path%>/hplus/js/plugins/ionRangeSlider/ion.rangeSlider.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/iCheck/icheck.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="<%=path%>/hplus/js/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/clockpicker/clockpicker.js"></script>
    <script src="<%=path%>/hplus/js/plugins/cropper/cropper.min.js"></script>
    
   <script type="text/javascript" src="<%=path%>/hplus/js/plugins/dataTables/jquery.dataTables.min.js"></script>
    <script src="<%=path%>/hplus/js/demo/form-advanced-demo.min.js"></script>
	<script src="<%=path%>/hplus/js/plugins/suggest/bootstrap-suggest.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.js"></script>

<script type="text/javascript" src="<%=path%>/js/marketing/dialog.js"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/public.js"></script>
	   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script>
	    var path = "<%=path%>";
	    var wechatTable;
	    var otherTable;
	    var access_token=$.cookie('access_token');
	   	var cid=$.cookie('cid');
	   	var uid=$.cookie('uid');
	   	var keyWord_wechat="";
	   	var keyWord_other="";
	   	var orderBy="browseNum desc";
	   	$.fn.dataTable.ext.errMode = 'none';
    
        
        $(function(){
        	 init(); 
        	
        });
        
        function init(){
        	wechatTable = wechatTable();
        	otherTable = otherTable();
        	
        	/* var myDate = new Date();
        	//获取当前年
        	var year=myDate.getFullYear();
        	//获取当前月
        	var month=myDate.getMonth()+1;
        	//获取当前日
        	var day=myDate.getDate(); 
        	$("#end_time").val(year+"-"+month+"-"+day); */
        }
        
        function func_dataTableReload_wechat(){
        	wechatTable.ajax.reload(function(){
        	});
        }
        function func_dataTableReload_other(){
        	otherTable.ajax.reload(function(){
        	});
        }
        
        
        function wechatTable(){
        	return $('#wechatTable').DataTable({
        		processing: true,
        		ordering: true,
        		searching: false,
        		info: true,
        		autoWidth: true,
        		lengthChange: false,
        	    language: {
        	    	emptyTable: '<div id="content_empty"  class="form-group white-bg" style="text-align:center;padding:120px 0;margin:0;">   <p>暂无名片统计数据</p></div>',
        	    	info: '从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录',
        			infoEmpty: '没有数据',
        			lengthMenu: '每页显示 _MENU_ 条记录',
        			loadingRecords: '正在加载数据....',
        			processing: '正在处理数据....',
        			zeroRecords: '没有找到匹配的记录',
        			paginate: {
        				first: '首页',
        				previous: '前页',
        				next: '后页',
        				last: '尾页'
        			}
        	    },
        	    order: [[3,'desc']],
        		pageLength: 10,
        	    pagingType: 'full_numbers',
        	    columnDefs: [{
       	         'targets' : [0,1,2],    //除第六，第七两列外，都默认不排序
    	         'orderable' : false
                 },{
        			render: function(data, type, row, meta) {
        				var startIndex = meta.settings._iDisplayStart;  
                        return startIndex + meta.row + 1; 
                    },
        			targets: 0
        		},{
        			render: function(data, type, full) {
                        var result = '<a class="converNum" id="'+full.id+'">'+data+'</a>';
        				return result;
                    },
        			targets: 6
        		}],
        	    columns: func_columns_wechat(),
        	    serverSide: true,
        	    ajax: {
        	    	contentType: 'text/plain;charset=utf-8',
        	    	type: 'POST',
        	    	url: func_AjaxUrl(),
        	    	data: function(d){
        	    		d.keyWord=keyWord_wechat;
        	    		d.orderBy=orderBy;
        	    		d.type="wechat";
        				return JSON.stringify(d);
        			}
        		}
        	});
        	
        } 
        
        
        function otherTable(){
        	return $('#otherTable').DataTable({
        		processing: true,
        		ordering: true,
        		searching: false,
        		info: true,
        		autoWidth: true,
        		lengthChange: false,
        	    language: {
        	    	emptyTable: '<div id="content_empty"  class="form-group white-bg" style="text-align:center;padding:120px 0;margin:0;">   <p>暂无名片统计数据</p></div>',
        	    	info: '从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录',
        			infoEmpty: '没有数据',
        			lengthMenu: '每页显示 _MENU_ 条记录',
        			loadingRecords: '正在加载数据....',
        			processing: '正在处理数据....',
        			zeroRecords: '没有找到匹配的记录',
        			paginate: {
        				first: '首页',
        				previous: '前页',
        				next: '后页',
        				last: '尾页'
        			}
        	    },
        	    order: [[3,'desc']],
        		pageLength: 10,
        	    pagingType: 'full_numbers',
        	    columnDefs: [{
       	         'targets' : [0,1,2],    //除第六，第七两列外，都默认不排序
    	         'orderable' : false
                 },{
        			render: function(data, type, row, meta) {
        				var startIndex = meta.settings._iDisplayStart;  
                        return startIndex + meta.row + 1; 
                    },
        			targets: 0
        		},{
        			render: function(data, type, full) {
                        var result = '<a class="converNum" id="'+full.id+'">'+data+'</a>';
        				return result;
                    },
        			targets: 7
        		}],
        	    columns: func_columns_other(),
        	    serverSide: true,
        	    ajax: {
        	    	contentType: 'text/plain;charset=utf-8',
        	    	type: 'POST',
        	    	url: func_AjaxUrl(),
        	    	data: function(d){
        	    		d.keyWord=keyWord_other;
        	    		d.orderBy=orderBy;
        	    		d.type="other";
        				return JSON.stringify(d);
        			}
        		}
        	});
        	
        }
        
        
        function func_AjaxUrl(){
        	return path+"/businessCard/statistics";
        }
        /**
         *	设置列名，对应后台
         */
        function func_columns_wechat(){
        	var jsonArr = [
                {"data":"card_id"},
        		{"data":"card_id"},
        		{"data":"name"},
        		{"data":"browseNum"},
        		{"data":"transmitNum"},
        		{"data":"activityClickNum"},
        		{"data":"receiveNum"},
        		
        	];
        	return jsonArr;
        }
        
        function func_columns_other(){
        	var jsonArr = [
                {"data":"card_id"},
				{"data":"card_id"},
				{"data":"name"},
				{"data":"browseNum"},
				{"data":"disBrowseNum"},
				{"data":"transmitNum"},
				{"data":"activityClickNum"},
				{"data":"receiveNum"},
        	];
        	return jsonArr;
        }
        
        
        function search_wechat(){
        	keyWord_wechat=$('#keyWord_wechat').val();
        	func_dataTableReload_wechat();
        }
        function search_other(){
        	keyWord_other=$('#keyWord_other').val();
        	func_dataTableReload_other();
        }
        
        $('.browseNum').on('click',function(event){
        	var desc=$(this).attr('aria-sort');
        	if(desc=="nudefined"||desc==undefined)
        		orderBy="browseNum asc";
        	if(desc=="ascending"){
        		orderBy="browseNum desc";
        	}else if(desc=="descending"){
        		orderBy="browseNum asc";
        	}
        });
        $('.disBrowseNum').on('click',function(event){
        	var desc=$(this).attr('aria-sort');
        	if(desc=="nudefined"||desc==undefined)
        		orderBy="disBrowseNum asc";
        	if(desc=="ascending"){
        		orderBy="disBrowseNum desc";
        	}else if(desc=="descending"){
        		orderBy="disBrowseNum asc";
        	}
        });
        
        $('.transmitNum').on('click',function(event){
        	var desc=$(this).attr('aria-sort');
        	if(desc=="nudefined"||desc==undefined)
        		orderBy="transmitNum asc";
        	if(desc=="ascending"){
        		orderBy="transmitNum desc";
        	}else if(desc=="descending"){
        		orderBy="transmitNum asc";
        	}
        	
        });
        
        $('.activityClickNum').on('click',function(event){
        	var desc=$(this).attr('aria-sort');
        	if(desc=="nudefined"||desc==undefined)
        		orderBy="activityClickNum desc";
        	if(desc=="ascending"){
        		orderBy="activityClickNum desc";
        	}else if(desc=="descending"){
        		orderBy="activityClickNum asc";
        	}
        	console.log("orderBy0---------->"+orderBy);
        	
        });
        
        $('.converNum').on('click',function(event){
        	var desc=$(this).attr('aria-sort');
        	if(desc=="nudefined"||desc==undefined)
        		orderBy="receiveNum asc";
        	if(desc=="ascending"){
        		orderBy="receiveNum desc";
        	}else if(desc=="descending"){
        		orderBy="receiveNum asc";
        	}
        });
        
        
        function exportDatas(){
        	keyWord=$('#keyWord').val();
        	startTime=$('#start_time').val();
        	endTime=$('#end_time').val();
        	window.location.href=path+"/socialSmsBatch/exportStatisticsForm?cid="+cid+"&uid="+uid+"&access_token="+access_token+"&keyWord="+encodeURI(encodeURI(keyWord))+"&start_time="+startTime+"&end_time="+endTime;
        }
        
        /* $(document).on('click', '.clickNum', function() {
	      	  window.location.href=path+'/api/bm/ui/click_list?id='+this.id;
		});
        $(document).on('click', '.converNum', function() {
	      	  
        	window.location.href=path+'/api/bm/ui/conver_list?id='+this.id;
		}); */
        
        
        
    </script>
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
</body>
</html>
